<template>
    <div id="select-chart" style="width: 700px; height: 460px; margin: 20px;">

    </div>
</template>

<script>
    import { onMounted } from "vue" ;
    import * as echarts from 'echarts';
    import { setChartData } from '@/libs/utils'

    export default {
        name: " SelectChart",
        props: {
            courseData: Object
        },

        setup(props, context) {
            onMounted(() => {
                var myChart = echarts.init(document.getElementById('select-chart'));

                myChart.setOption({
                    title: {
                        text: '课程选择人数柱状图'
                    },
                    tooltip: {},
                    xAxis: {
                        data: setChartData(props.courseData, 'course')
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            data: setChartData(props.courseData, 'quantity')
                        }
                    ]
                });

            });
        }
    }
</script>

<style lang="scss" scoped>

</style>